<template>
  <NpDialog :visible.sync="dialogPvVisible" width="608px" class="container">
    <template>
      <div class="title">新增/编辑品牌</div>
      <div class="con">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef" label-width="86px">
          <el-form-item label="品牌名称" prop="menufacturer">
            <el-input v-model="ruleForm.menufacturer" placeholder="请输入品牌名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="fotter">
        <el-button type="info" plain class="btn1" @click="uploadCancelClick">取消</el-button>
        <el-button type="warning" @click="uploadImportClick('ruleFormRef')" :loading="submitLoading">确定</el-button>
      </div>
    </template>
  </NpDialog>
</template>
<script>
import NpDialog from "@/components/np/Dialog/index.vue"
import {
  addMenufacturer,
  updateMenufacturer,
} from '@/api/backend-account-management/brand/list'

export default {
  components: {
    NpDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    infoRow: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    let com_blur__rule = [{ required: true, message: '此字段为必填。', trigger: 'blur' }],
      com_change__rule = [{ required: true, message: '此字段为必填。', trigger: 'change' }];
    return {
      dialogPvVisible: false,

      submitLoading: false,
      ruleForm: {
        menufacturer: '',
      },
      rules: {
        menufacturer: com_blur__rule,
      },
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.dialogPvVisible = newVal;
        if (newVal) {
          if (this.infoRow) {
            this.editInfo()
            return
          }
        }
        if (!newVal) {
          this.resetFieldsFrom()
        }
      }
    }
  },
  computed: {
    isEdit() {
      return !!this.infoRow
    },
    isAdd() {
      return !this.infoRow
    },
  },
  created() {
  },
  methods: {
    editInfo() {
      let arr1 = Object.keys(this.ruleForm);
      arr1.forEach(el => {
        this.ruleForm[el] = this.infoRow[el] || this.ruleForm[el]
      })
    },
    resetFieldsFrom() {
      Object.keys(this.ruleForm).forEach(el => {
        this.ruleForm[el] = ''
      })
    },
    uploadCancelClick() {
      this.dialogPvVisible = false
      this.submitLoading = false
      this.$refs['ruleFormRef'].resetFields()
      this.$emit("update:visible", this.dialogPvVisible)
    },
    uploadImportClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = this.ruleForm,
            fun = addMenufacturer;

          if (this.isEdit) {
            fun = updateMenufacturer;
            params.id = this.infoRow.id || ''
          }

          this.submitLoading = true
          fun(params).then(res => {
            if (res.code === 200) {
              let data = this.isEdit ? 'edit' : 'add',
                obj = {
                  add: '新增',
                  edit: '编辑',
                };
              this.$message.success(`${obj[data]}成功!`)
              setTimeout(() => {
                this.uploadCancelClick()
                this.$emit("editAddSuccessChange", data)
              }, 2000)
              return
            } else {
              this.$message.error(`${obj[data]}失败。`)
            }
          }).catch(err => {
            this.$message.error('系统错误，服务失败。')
            this.submitLoading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.title {
  padding-bottom: 32px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #15181D;
}

.fotter {
  padding-top: 12px;
  display: flex;
  justify-content: right;
  align-items: center;

  .btn1 {
    margin-right: 12px;
  }
}

.container {
  ::v-deep {
    @media (max-width: 1280px) {
      .np-el-d-body {
        padding: 24px 40px 40px 24px;
        min-height: 264px;
      }
    }
  }
}

::v-deep {
  .con {
    .el-form-item__label {
      font-size: 14px;
      font-weight: normal;
      color: #8B8B8B;
    }

    .el-date-editor {
      width: 100%;
    }
  }
}
</style>